<style lang="sass" scoped>
    #imgDiv{
        width:600px;
        height:600px;
        display:block;
        margin:84px auto 44px;
        // background:#ff0000;
        img{
            width:100%!important;
        }
    }
    .detail{
        text-align:center;
        margin:50px 0 80px;
        p{
            font-size:36px;
            color:#969696;
        }
    }
    .next{
        width:280px;
        height:84px;
        line-height:84px;
        text-align:center;
        color:#fff;
        background:#ff7575;
        font-size:34px;
        margin:40px auto;
        border-radius:60px;
    }
    #qrcode{
        display:none;
    }
</style>
<template>
    <div class="container">
        <!--canvas中的二维码-->
        <div id="qrcode"></div>
        <!--image形式的二维码-->
        <div id="imgDiv"></div>

        <div class="detail">
            <p v-if="line">联网成功，长按二维码绑定设备吧</p>

            <p v-if="!line">{{'desc' | enFy($route)}}</p> 
            <p v-if="!line">{{'desc2' | enFy($route)}}</p>
        </div>
        <div v-if="!line" @click="next()" class="next">{{'Regenerate' | enFy($route)}}</div>
    </div>
</template>
<script>
    export default {
        components: {
        },
        data() {
            return {
                line:false,
                websocket:null,
            }
        },
        watch:{
        },
        created(){

        },
        mounted() {
            this.$nextTick(() => {
                // new VConsole()
                this.showQRcode();
            });
        },
        methods: {
            showQRcode(item){
                this.$nextTick(()=>{
                    let qrcodeurl = decodeURIComponent(util.getCookie('qrcode'));
                    this.drawQrcode(qrcodeurl)
                    if(this.$route.query.online==='1'&&!this.$route.query.language)this.socket()
                })
            },
            // drawQrcode(qrcodeurl){
            //     var qrcode = document.getElementById("qrcode");
            //     qrcode.innerHTML = '';
            //     new QRCode(qrcode,{
            //         text:qrcodeurl,
            //     });
            //     $('#qrcode').find('img').css({width:'100%',display:'block'})
            // },
            drawQrcode(qrcodeurl){
                function utf16to8(str) { 
                    var out, i, len, c; 
                    out = ""; 
                    len = str.length; 
                    for(i = 0; i < len; i++) { 
                        c = str.charCodeAt(i); 
                        if ((c >= 0x0001) && (c <= 0x007F)) { 
                            out += str.charAt(i); 
                        } else if (c > 0x07FF) { 
                            out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F)); 
                            out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F)); 
                            out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F)); 
                        } else { 
                            out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F)); 
                            out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F)); 
                        } 
                    } 
                    return out; 
                }
                var qrcodeurl = utf16to8(qrcodeurl)
                //利用插件生成二维码,生成的二维码在canvas中
                $('#qrcode').html('');
                $('#qrcode').qrcode({
                    width: 300,
                    height:300,
                    text: qrcodeurl
                });
                //从canvas中提取图片image
                function convertCanvasToImage(canvas) {
                    //新Image对象，可以理解为DOM
                    var image = new Image();
                    // canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持
                    // 指定格式PNG
                    image.src = canvas.toDataURL("image/png");
                    image.style.width = '100%'
                    return image;
                }

                //获取网页中的canvas对象
                var mycanvas1=document.getElementsByTagName('canvas')[0];

                //将转换后的img标签插入到html中
                var img = convertCanvasToImage(mycanvas1);
                $('#imgDiv').html('');
                $('#imgDiv').append(img);//imgDiv表示你要插入的容器id
            },
            socket(){
                let socketApi = 'ws://123.207.48.253:8085';
                if(location.href.indexOf('bm.mocn.cc')>-1){
                    socketApi = 'wss://bm.mocn.cc/websocket'
                }

                if (window.WebSocket) {
                    this.websocket = new WebSocket(encodeURI(socketApi));
                    this.websocket.onopen = ()=> {
                        console.log('已连接');
                        let userinfo = util.getStorage('local','userinfo');
                        let param = {
                            add:true,
                            openId:JSON.parse(userinfo).openid
                        }
                        this.websocket.send(JSON.stringify(param));
                    };
                    this.websocket.onerror = ()=> {
                        console.log('连接发生错误');
                    };
                    this.websocket.onclose = (type)=> {
                        console.log('已经断开连接');
                        if(!type)this.socket();
                    };
                    // 消息接收
                    this.websocket.onmessage = (message)=> {
                        console.log(message.data);
                        var data = JSON.parse(message.data);
                        this.line = true;
                        router.replace({name:'scancode4',query:{url:encodeURIComponent(data.url),online:this.$route.query.online}});
                    };
                } else {
                    alert("该浏览器不支持下单提醒。<br/>建议使用高版本的浏览器，<br/>如 IE10、火狐 、谷歌  、搜狗等");
                }
            },
            next(){
                router.replace({name:'scancode2',query:{online:this.$route.query.online,language:this.$route.query.language}});
            }
        },
        beforeDestroy(){
            if(this.websocket)this.websocket.close(true)
        }
    };
</script>